   <%@ include file="/WEB-INF/jsp/common.jsp"%>

 

<script type="text/javascript" src="js/app/common.js"></script>
      
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/css/ui.multiselect.css" />
 
    <script src=     "js/jqgrid/grid.locale-en.js"  type="text/javascript"></script>
    <script src=    "js/jqgrid/jquery.jqGrid.min.js"   type="text/javascript"></script>
    <script src=    "js/jqgrid/grid.formedit.js"    type="text/javascript"></script> 
    <script src=   "js/jqgrid/jquery.jqGrid.src.js"    type="text/javascript"></script>
     

<title>Time Table</title>

<script   type="text/javascript">
 $(document).ready(function() { 

	 var subjects =$.ajax(
			 {url: 'subjectList.htm', 
				 async: false, 
				 success: function(data, result) { 
					 if (!result) alert('Failure to retrieve the teachers.');
						 
					 },  
				failure: function(data, result) {
				    
					    alert('Failure to retrieve the Countries.');
						window.alert(data);

					 }
			 }).responseText;
	 var e = document.getElementById("chngroup") 
	 var section = e.options[e.selectedIndex].value;
	var editOk = true;
     $("#gridTimetable").jqGrid({
    	 url : 'timeTableDetails.htm?section='+section, 
         datatype: 'json',
         mtype: 'GET',
         caption: '',
         colNames: ['timetableID', 'Mon', 'Tue', 'Wed','Thus' , 'Fri', 'Sat','Sun'],
         colModel: [
          { name: 'timetableID', index: 'timetableID',editable:true,width:15,  hidden: true, viewable: false },
         { name: 'mon', index: 'mon', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,edittype:"select", editoptions:{size:20, value: subjects}} ,
         { name: 'tue', index: 'tue', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,edittype:"select", editoptions:{size:20, value: subjects}} ,
         { name: 'wed', index: 'wed', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,edittype:"select", editoptions:{size:20, value: subjects}} ,
         { name: 'thus', index: 'thus', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,edittype:"select", editoptions:{size:20, value: subjects}} ,
         { name: 'fri', index: 'fri', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,edittype:"select", editoptions:{size:20, value: subjects}} ,
         { name: 'sat', index: 'sat', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,edittype:"select", editoptions:{size:20, value: subjects}} ,
         { name: 'sun', index: 'sun', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,edittype:"select", editoptions:{size:20, value: subjects}} 
           
],

         loadtext: 'Loading..',
         multiselect: true,
         pager: $("#pager"),
         rowNum: 10,
         rownumbers: true,
         rowList: [10, 20, 50],
         sortorder: 'asc',
         viewrecords: true,
         height: "100%",
         width: 765,
         cellEdit: true,
         imgpath: '../scripts/jqgrid/themes/basic/images',
         editurl : 'addEditTimeTable.htm',
         caption: "Time Table", 

     });
     var addOptions = { reloadAfterSubmit:false, 
    		 onclickSubmit : function(eparams) { 
				  
			}};
     var deleteOptions = { reloadAfterSubmit:false, url : "deleteTimeTableRecord.htm",
    		 onclickSubmit : function(eparams) { 
					var allUserIDs = "";
    			    var selectedrows = jQuery("#gridTimetable").jqGrid('getGridParam', 'selarrrow'); 
    			    // we can use all the grid methods here
    			    //to obtain some data 
    			    for(var row in selectedrows)
    			    	{
    			        var userID = 	jQuery('#gridTimetable').jqGrid('getCell',selectedrows[row],'timetableID');
    			        allUserIDs = allUserIDs + userID + ";" 
    			    	}
    			    eparams.url = eparams.url + "?timetableID= " + allUserIDs; 
    			}};
     var editOptions = {reloadAfterSubmit:false, 
    		 onclickSubmit : function(eparams) { 
					 
 			}};
     
     jQuery("#gridTimetable").jqGrid('navGrid', '#pager', { add: true, view: true, del: true, edit: editOk },
    	     editOptions, // edit options
             addOptions , // add options
             deleteOptions, // del options
             {}, // search options
             {   // vew options
             beforeShowForm: function(form) {
              
             }
         });
   

 });

 function sectionChanged(sel) {
	 
	 $("#gridTimetable").setGridParam(
             { 
                     url: 'timeTableDetails.htm?section='+sel.value
             }
             ).trigger("reloadGrid")
 }
		  </script> 
 
	 </head>

	 <body class="body-content-class">



	 <div id="wrapper">
	 	<div id="banner">

	 <!-- include top common header links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/commonHeader.jsp"%>

	 <!-- include top navigation links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/navigationTop.jsp"%>

	 	</div>
	 	<div id="content-wrapper">
	 		<div id="content">
	 		<div class="content-top">
	 		</div>
	 		<div class="content">


	 <div class="content-body">
	 	<table cellspacing="0" cellpadding="0" class="layout-grid">
	 		<tr>
	 			<td>
	 <table class="layout-grid" cellspacing="0" cellpadding="0">
	 	<tr>
	 		 <td class="left-nav">
	 		
	 <!-- include  content navigation left links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/navigationContentLeft.jsp"%>
	 		
	 		</td>
	 		<td class="normal">
	 				<div id="demo-header">
	 							<h2>Time Table configuration</h2>
	 						</div>
	 						<div style="position: absolute; right: 27px" id="switcher"></div>
	 						<div id="demo-config">
	 							<div id="demo-frame-wrapper">
	 							<div id="demo-frame" style="height: 500px; width: 775px;">
	 							

	 <div class="demo-description" style="height: 300px">


	<form action="createTeacher.htm" method="post" id="add-teacher-form-id" name="add-teacher-form" modelAttribute="user"  >
 Select Section: <select id="chngroup" onchange="sectionChanged(this);"> 
  <option value="name">1  A</option> 
  <option value="invdate">2  B</option> 
  <option value="clear">3 C</option> 
  </select> <br /> <br />
 
   <table id="gridTimetable"></table> 
    <div id="pager" ></div> 
   
 
</form>
	 </div>
	 
	 								</div>									
	 							</div>
	 						</div>
	 					

	 <div class="UIAPIPlugin" id="widget-docs">
	   

	   <div id="options">
	     <h2 class="top-header">Options</h2>
	     <ul class="options-list">
	       



	     </ul>
	   </div>
	   
	   <div id="methods">
	     <h2 class="top-header">Methods</h2>
	     <ul class="methods-list">
	     </ul>
	   </div>
	   <div id="theming">
	   </div>
	 </div>
	 		</td>
	 	</tr>
	 </table>


	 			</td>
	 		</tr>
	 	</table>
	 </div>
	 		</div>
	 		</div>
	 	</div>
	 	<div id="footer">
	 	
	 	<!-- include  footer content links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/footer.jsp"%>
	 	
	 	</div>
	 </div>
	 </body>

	 </html>
   